<template>
  <div class="customerInfoMation_module wfull" style="height:100%">
    <div class="form_box wfull">
      <el-card class="mb15" style="width:100%;">
        <div class="flex justify_between">
      <el-form :inline="true" :model="formData">

        <!-- 手机号-->
        <el-form-item :label="$t('phoneNum')">
          <el-input
            v-model="formData.phoneNumber"
            :placeholder="$t('phoneNum_placeholder')"
            clearable
            v-trim
          />
        </el-form-item>

         <!-- 姓名/联系人 -->
        <el-form-item :label="$t('customerInfoMation_nameContact')">
          <el-input
            v-model="formData.customerName"
            :placeholder="$t('customerInfoMation_nameContact_placeholder')"
            clearable
            v-trim
          />
        </el-form-item>
        <!-- 搜索 -->
        <el-form-item>
          <div>
            <el-button
              type="primary"
              :icon="SearchIcon"
              @click="getTableData"
              >{{ $t("search") }}</el-button
            >
            <el-button @click="resetForm">{{ $t("reset") }}</el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- 新增 -->
      <el-button @click="handleAdd">{{
        $t("new_add")
      }}</el-button>
      </div>
      </el-card>
    </div>

    <!-- 列表数据 -->
    <el-table
      ref="singleTableRef"
      :data="tableData"
      highlight-current-row
      height="500px"
      v-loading="loading"
      stripe
      border
       :header-cell-style="headerCellClsasName"
    >
    <template #empty>
      <div>{{$t("table_empty")}}</div>
    </template>
      <el-table-column
        type="index"
        width="100"
        :label="$t('clueInformation_no')"
      />
      <!-- 客户姓名 -->
      <el-table-column
        property="customerName"
        :label="$t('customerInfoMation_customerName')"
        show-overflow-tooltip
      />
      <!-- 客户手机号 -->
      <el-table-column
        property="phoneNumber"
        :label="$t('customerInfoMation_phoneNum')"
        width="120"
        show-overflow-tooltip
      />
      <!-- 店铺类型/行业 -->
      <el-table-column
        property="storeTypeIndustry"
        :label="$t('customerInfoMation_storeTypeIndustry')"
        width="120"
        show-overflow-tooltip
      />
      <!-- 所属企业名称 -->
      <el-table-column
        property="enterpriseName"
        :label="$t('customerInfoMation_nameOfAffiliatedEnterprise')"
        width="120"
        show-overflow-tooltip
      />
      <!-- 联系人 -->
      <el-table-column
        property="contactPerson"
        :label="$t('customerInfoMation_contacts')"
        width="120"
        show-overflow-tooltip
      />
      <!-- 联系人电话 -->
      <el-table-column
        property="contactPersonPhone"
        :label="$t('customerInfoMation_contacts_phoneNum')"
        width="120"
        show-overflow-tooltip
      />
      <!-- 跟进人 -->
      <el-table-column
        property="follower"
        :label="$t('customerInfoMation_followUpPerson')"
        width="120"
        show-overflow-tooltip
      />
      <!-- 创建时间 -->
      <el-table-column
        property="createTime"
        :label="$t('customerInfoMation_crateTime')"
        width="120"
      />
      <el-table-column :label="$t('clueInformation_operate')">
        <template #default="scope">
          <div>
            <el-button type="primary" @click="handleDetail(scope.row)">{{
              $t("detail")
            }}</el-button>
            <el-button type="primary" @click="handleEditItem(scope.row)">{{
              $t("edit")
            }}</el-button>
            <el-button type="primary" @click="handleModifyFullowPersopn(scope.row)">{{
              $t("customerInfoMation_modifyfollowUpPerson")
            }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-config-provider :locale="zhCn">
    <el-pagination
      style="margin-top: 30px"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 50, 100, 200, 300, 400]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper,->,slot"
      :total="totalNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    </el-config-provider>
  <!-- 修改跟进人弹框 -->
  <DialogComponent :modelValue="dialogVisible" @update:modelValue="handleDialogVisibleUpdate"
      :key="dialogVisibleKey"
      :title="dialogTitle"
      :activeEvent="activeEvent"></DialogComponent>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted,markRaw } from "vue";
import zhCnMjs from "element-plus/dist/locale/zh-cn.mjs"
import { Search } from "@element-plus/icons-vue";

import {findcustomerinfolist} from "../../../service/customerManage/customerManage";
import {SearchListFormDataType,SearchTableItemDataType} from "../../../viewModel/customerManage/customerManage";


import { formatDate } from "../../../util/util";
import { useRouter } from "vue-router";
import DialogComponent from "../../../components/DialogComponent/DialogComponent.vue"
export default defineComponent({
  components: {
    DialogComponent
  },
  setup() {
    onMounted(() => {
      getTableData();
    });
    
    const router = useRouter();

    const currentPage = ref(1);
    const pageSize = ref(10);
    const totalNum = ref(0);
    const loading = ref(false)
    const zhCn = zhCnMjs

    const headerCellClsasName = () => {
      return {
        'background-color': '#f0f0f0',
        'color': '#333',
        'font-weight': 'bold'
      };
    }

    const SearchIcon = markRaw(Search);
    // 表单的数据
    const formData = reactive<SearchListFormDataType>(new SearchListFormDataType());

    // 重置
    const resetForm = () => {
      formData.customerName = "";
      formData.phoneNumber = "";
      getTableData();
    };

    const tableData = ref<SearchTableItemDataType[]>([]);

    const submitData: SearchListFormDataType = reactive(new SearchListFormDataType());
    // 获取列表数据
    const getTableData = () => {
      loading.value = true
      submitData.customerName = formData.customerName
      submitData.phoneNumber = formData.phoneNumber
      submitData.status = formData.status
      findcustomerinfolist(submitData)
        .then((res) => {
          loading.value = false
          if (res.data && res.data.data) {
            totalNum.value = res.data.total || 0;
            let data = res.data.data as SearchTableItemDataType[];
            tableData.value = data.map((item: SearchTableItemDataType) => {
              return {
                ...item,
                lastModifiedTime: formatDate(item.lastModifiedTime),
                createTime: formatDate(item.createTime),
              };
            });
          }
        })
        .catch((err) => {
          loading.value = false
          console.log("失败", err);
        });
    };

    const handleSizeChange = (val: number) => {
      submitData.pageSize = val;
      getTableData();
    };
    const handleCurrentChange = (val: number) => {
      submitData.pageNo = val;
      getTableData();
    };

    // 详情
    const handleDetail = (payload:SearchTableItemDataType) => {
      router.push({
        name: "customerInfoDetail",
        params: {
          customerId:payload.customerId
        }
      })
    }

    // 编辑
    const handleEditItem = (payload:SearchTableItemDataType) => {
      router.push({
        name: "editCustomerInfo",
        params: {
          customerId:payload.customerId
        }
      })
    };

    // 添加
    const handleAdd = () => {
      router.push("/baseLayout/addCustomerInfo");
    };

    const dialogVisibleKey = ref(new Date().getTime());
    const dialogVisible = ref(false)
    const dialogTitle = ref("修改跟进人")
    const handleModifyFullowPersopn = (payload:SearchTableItemDataType) => {
      console.log("修改：",payload);
      dialogVisibleKey.value = new Date().getTime();
      
      dialogVisible.value = true
    }

    const activeEvent = () => {
      // dialogVisible.value = false
      let flag = true
      return new Promise((resolve,reject) => {
        if (flag) {
          resolve(true)
        }else {
          reject(false)
        }
      })
    }

    // 更新弹框的状态
    const handleDialogVisibleUpdate = (newValue: boolean) => {
      dialogVisibleKey.value = new Date().getTime();
      dialogVisible.value = newValue;
    };

    return {
      formData,
      SearchIcon,
      tableData,
      handleAdd,
      getTableData,
      resetForm,
      handleSizeChange,
      handleCurrentChange,
      currentPage,
      pageSize,
      totalNum,
      handleDetail,
      handleEditItem,
      loading,
      zhCn,
      activeEvent,
      dialogVisible,
      handleDialogVisibleUpdate,
      handleModifyFullowPersopn,
      dialogVisibleKey,
      dialogTitle,
      headerCellClsasName,
    };
  },
});
</script>
<style scoped>
.form_box {
  display: flex;
  justify-content: space-between;
}
.select_box {
  width: 150px;
}
.table-content {
  height: calc(100% - 240px);
  background: red;
}
</style>
